<template>
  <el-dialog width="500px" title="物流信息" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <div class="warn-box" style="padding:10px">
      <svg-icon style="margin-right:10px" icon-class="warn" :size="20" />
      <p style="color:#000000;line-height:23px">发货凭证图片可做法律依据，添加后不可进行删除，请谨慎操作。点击查看<a
          href="https://image-xxz.oss-cn-beijing.aliyuncs.com/download/%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.doc"
          class="blue-font">注意事项</a></p>
    </div>
    <div style="margin:0 auto 10px;display: block;width: 50%;">
      <el-button size="small" type="primary" @click="downloadWord(form.orderId)">点击下载{{'<租赁设备本人签收凭证>'}}
      </el-button>
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="订单编号">
        <el-input v-model="form.orderId" disabled></el-input>
      </el-form-item>
      <el-form-item label="设备编号" prop="device_num">
        <el-input v-model="form.device_num"></el-input>
      </el-form-item>
      <el-form-item v-if="form.delivery_type==1" label="物流公司" prop="logistics_name">
        <el-select v-model="form.logistics_name" placeholder="请选择">
          <el-option v-for="(item, index) in logisticsNames" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.delivery_type==1" label="物流单号" prop="logistics_no">
        <el-input v-model="form.logistics_no" clearable @input="val=>changeInput(val)">
        </el-input>
      </el-form-item>
      <el-form-item label="发货凭证" prop="images">
        <crop-upload ref="cropUpload" :multiple="true" show-type="photo" :init-val="form.images" wrapper-width="100px"
          wrapper-height="100px" :photo-width="100" :photo-height="100" @setVal="imgChange"></crop-upload>
        
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deliverGoods, getLogisticAll, downloadWord,express_doulaizu } from "@/api/order";
import { editProcureApplyData} from '@/api/audit'
import cropUpload from "@/components/cropUpload";
export default {
  components: { cropUpload },
  props: ['orderId','itemList'],
  data() {
    return {
      form: {
        orderId: "",
        device_num: '',
        logistics_name: '',
        logistics_no: '',
        images: []
      },
      params: {
        orderId: '',
      },
      rules: {
        device_number: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        logistics_name: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ],
        logistics_no: [
          { required: true, message: '物流单号不能为空', trigger: 'blur' }
        ],
        images: [
          { required: true, message: '请上传发货凭证', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      logisticsNames: []
    }
  },
  methods: {
    downloadWord(orderId) {
      if(this.itemList.member_id=='202303011707070001'){
        // 请求都来租租赁凭证
        // this.params.orderId = orderId;
        let params={
          procureId:this.itemList.id
        }
        express_doulaizu(params).then(res => {
          this.$message({
            message: res[0],
            type: 'success'
          })
        })
      }else{
        this.params.orderId = orderId;
        downloadWord(this.params).then(res => {
          this.$message({
            message: res[0],
            type: 'success'
          })
        })
      }

    },
    changeInput(value) {
      const pattern = /^[0-9a-zA-Z]*$/g;
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.form.logistics_no = ''
      }
    },
    imgChange(val, type) {
      if (type === 'del') {
        this.form.images.splice(val, 1);
      } else {
        this.form.images.push(val);
      }
      this.$refs.cropUpload.sortList = this.form.images;
    },
    handleTypeChange(val) {
      if (val != 1) {
        this.form.logistics_name = '';
        this.form.logistics_no = '';
        this.form.images = [];
      }
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
					let params={
						apply_id:this.itemList.id,
						device_num:this.form.device_num,
						logistics_no:this.form.logistics_no,
						logistics_name:this.form.logistics_name,
						images:this.form.images.join(',')
					}
          editProcureApplyData(params).then(res => {
            this.dialogVisible = false;
            this.$emit('getList', true);
          })
        } else {
          this.$message({
            message: "请检查表单错误",
            type: "error"
          });
          return false;
        }
      });
    },
    getSelect() {
      getLogisticAll().then(res => {
        this.logisticsNames = res || [];
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.form = {
          orderId: this.orderId,
          delivery_type: 1,
          logistics_name: this.itemList.logistics_name == null?'':this.itemList.logistics_name,
          logistics_no: this.itemList.logistics_no == null?'':this.itemList.logistics_no,
          images: this.itemList.images == null?[]:this.itemList.images.split(','),
          device_num:this.itemList.device_num==null?'':this.itemList.device_num
        }
        this.getSelect();
      } else {
        this.form = {
          orderId: this.orderId,
          delivery_type: 1,
          logistics_name: '',
          logistics_no: '',
          images:[],
          device_num:''
        }
        this.$refs['ruleForm'].resetFields();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
a,
a:focus,
a:hover {
  color: $mainBlue;
}
</style>
